<template>
  <div class="app-container">
    <el-dialog :title="titles[flag]" :visible.sync="dialogVisible" width="60%" append-to-body>
      <div class="myTitle">基本信息</div>
      <el-form ref="form" :model="form" :disabled="flag==1||flag==3">
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="计划单号" prop="planNo" required>
              <el-input v-model="form.planNo" placeholder="自动生成" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="计划名称" prop="planName" required>
              <el-input v-model="form.planName" placeholder="请输入" :disabled="flag!=0"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商品名称" prop="productId" required>
              <el-select v-model="form.productId" filterable style="width: 100%">
                <el-option
                  v-for="item in goodList"
                  :key="item.id"
                  :label="item.productName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="工艺名称" prop="processFlowId" required>
              <el-select v-model="form.processFlowId" filterable style="width: 100%" :disabled="flag!=0"
                         @change="changeWork">
                <el-option
                  v-for="item in workList"
                  :key="item.id"
                  :label="item.flowName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="生产来源" prop="taskSourceType" required>
              <el-select v-model="form.taskSourceType" filterable style="width: 100%" disabled>
                <el-option
                  v-for="item in dict.type.ims_produce_type"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="分配方式" prop="distributeType" required>
              <el-select v-model="form.distributeType" filterable style="width: 100%">
                <el-option
                  v-for="item in dict.type.ims_share_type"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="优先级" prop="priority" required>
              <el-select v-model="form.priority" filterable style="width: 100%">
                <el-option
                  v-for="item in dict.type.ims_priority_level"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="生产数量" prop="quantity" required>
              <el-input type="number" v-model="form.quantity" placeholder="请输入" :min="0"
                        :disabled="flag!=0"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="计划日期" prop="time" required>
              <el-date-picker v-model="form.time" type="daterange" start-placeholder="开始日期"
                              end-placeholder="结束日期"
                              value-format="yyyy-MM-dd" clearable></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="BOM名称" prop="produceBomId" required>
              <el-select v-model="form.produceBomId" style="width: 100%" filterable @change="changeBom">
                <el-option
                  v-for="item in bomList"
                  :key="item.id"
                  :label="item.bomName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="cad图纸" prop="fileUrl" required>
              <div v-if="flag==1">{{ form.fileName }}</div>
              <div v-else>
                <div v-if="form.fileUrl" style="display: flex; align-items: center;cursor: pointer;">
                  <el-link type="primary">{{ form.fileName }}</el-link>
                  <i class="el-icon-close closeDiv" @click="form.fileUrl=null;form.fileName=null"></i>
                </div>
                <el-upload
                  v-else
                  :headers="headers"
                  :action="action"
                  :on-success="uploadSuccess"
                  :on-progress="uploadProgress"
                  :show-file-list="false"
                >
                  <el-button type="primary" plain>点击上传</el-button>
                </el-upload>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-tabs v-model="tabIndex">
        <el-tab-pane label="物料信息" name="0">
          <el-table
            :data="matList"
            maxHeight="500"
          >
            <el-table-column type="index" label="序号" align="center"></el-table-column>
            <el-table-column prop="materialName" label="物料名称" align="center"/>
            <el-table-column prop="skuName" label="物料规格" align="center"/>
            <el-table-column prop="materialName" label="物料类型" align="center"/>
            <el-table-column prop="master" label="主材料" align="center">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.master"/>
              </template>
            </el-table-column>
            <el-table-column prop="quantity" label="数量" align="center">
              <template slot-scope="scope">
                <el-input v-if="flag==0||flag==2" type="number" v-model="scope.row.quantity" :min="0"
                          placeholder="请输入"></el-input>
                <div v-else>{{ scope.row.quantity }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="size" label="尺寸" align="center">
              <template slot-scope="scope">
                <el-input v-if="flag==0||flag==2" v-model="scope.row.size" placeholder="请输入"></el-input>
                <div v-else>{{ scope.row.size }}</div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="流程信息" name="1">
          <el-table
            :data="itemList"
            max-height="500">
            <el-table-column type="index" label="序号" align="center"/>
            <el-table-column prop="proName" label="工序名称" align="center" key="4"/>
            <el-table-column prop="operId" label="责任人" align="center" key="5">
              <template slot-scope="scope">
                <div v-if="flag==1">
                  {{ scope.row.operName }}
                </div>
                <el-select v-model="scope.row.operId" style="width: 100%" v-if="flag==3">
                  <el-option
                    v-for="item in scope.row.userRelationVoList"
                    :key="item.userId"
                    :label="item.nickName"
                    :value="item.userId">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="dialogOk" v-if="flag!=1">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getCommonCode, listGood} from "../../../api/imsMng";
import {
  addProducePlan,
  updateProducePlan,
  listProduceWork,
  shareProducePlan, lisProduceBom
} from "../../../api/produceMng";
import {getToken} from "../../../utils/auth";

export default {
  dicts: ['ims_receipt_type', 'ims_share_type', 'ims_produce_type', 'ims_priority_level', 'sys_yes_no'],
  data() {
    return {
      flag: 0,
      tabIndex: "0",
      titles: ['新增', '详情', '修改', '分配'],
      loading: false,
      dialogVisible: false,
      form: {
        processFlowId: '',
        time: []
      },
      headers: {
        Authorization: 'Bearer ' + getToken()
      },
      action: process.env.VUE_APP_BASE_API + '/ims/product/file/upload',
      unitList: [],
      processList: [],
      goodList: [],
      itemList: [],
      workList: [],
      bomList: [],
      matList: []
    }
  },
  methods: {
    show(flag, form) {
      this.flag = flag
      this.dialogVisible = true
      this.itemList = []
      this.matList = []
      this.tabIndex = '0'
      this.resetForm('form')
      this.form = form
      this.load()
      if (!flag) {
        this.form.taskSourceType = '2'
        getCommonCode({orderType: 100}).then(res => {
          this.$set(this.form, 'planNo', res.data.orderNo)
          this.$set(this.form, 'distributeType', '1')
        })
      } else {
        this.itemList = this.form.taskVoList
        this.matList = this.form.produceBomItems
        if (this.form.startTime && this.form.endTime) {
          this.$set(this.form, 'time', [this.form.startTime, this.form.endTime])
        }
      }
    },
    uploadProgress() {
      this.loading = true
    },
    uploadSuccess(res) {
      this.loading = false
      if (res.code == 200) {
        this.$set(this.form, 'fileUrl', res.data.fileUrl)
        this.$set(this.form, 'fileName', res.data.fileName)
      } else {
        this.$message.error(res.msg)
      }
    },
    load() {
      listGood({pageSize: -1, productType: 1}).then(res => {
        this.goodList = res.rows
      })
      listProduceWork({pageSize: -1}).then(res => {
        this.workList = res.rows
      })
      lisProduceBom({pageSize: -1}).then(res => {
        this.bomList = res.rows
      }).finally(e => {
        this.loading = false
      })
    },
    changeBom(val) {
      let obj = this.bomList.filter(e => e.id == val)[0]
      this.matList = obj.itemList
    },
    changeWork(e) {
      let list = this.workList.filter(val => val.id == e)
      this.itemList = list[0].processStepList
    },
    deleteRow(row) {
      this.itemList = this.itemList.filter(val => val != row)
    },
    dialogOk() {
      this.$refs.form.validate(e => {
        if (e) {
          this.form.taskBoList = this.itemList
          this.form.produceBomItems = this.matList
          if (this.form.time && this.form.time.length) {
            this.form.startTime = this.form.time[0]
            this.form.endTime = this.form.time[1]
          }
          if (this.flag == 0) {
            addProducePlan(this.form).then(res => {
              this.dialogVisible = false
              this.$message.success('新增成功')
              this.$emit('ok')
            })
          }
          if (this.flag == 2) {
            updateProducePlan(this.form).then(res => {
              this.dialogVisible = false
              this.$message.success('修改成功')
              this.$emit('ok')
            })
          }
          if (this.flag == 3) {
            let req = {
              id: this.form.id,
              taskBoList: this.itemList
            }
            shareProducePlan(req).then(res => {
              this.dialogVisible = false
              this.$message.success('分配成功')
              this.$emit('ok')
            })
          }
        }
      })
    },
  }
}
</script>
<style scoped>
.closeDiv {
  color: red;
  margin-left: 10px
}
</style>
